<script setup lang="ts">
import { storeToRefs } from "pinia";
import { ref } from "vue";
import type { Ref } from "vue";
import { useRouter } from "vue-router";
import type { Router } from "vue-router";
import type { Category } from "@/types/homeTypes/homeTypes.ts";
import useHomeStore from "@/pinia/modules/homeStore/homeStore.ts";


const homeStore = useHomeStore();
const router: Router = useRouter();

const { categoryList }: { categoryList: Ref<Category[]> } = storeToRefs(homeStore);

const categoryId = ref<string>("");


const handleEnter = (id: string) => {
   categoryId.value = id;
};

const handleLeave = (empty: string) => {
   categoryId.value = empty;
};


const handleClick = (name: string, id: string) => {
   categoryId.value = "";
   router.push({ name, params: { id } });
};

</script>

<template>
   <ul class="navs">
      <el-skeleton animated :count="10" :loading="!categoryList.length">
         <template #template>
            <el-skeleton-item></el-skeleton-item>
         </template>
         <template #default>
            <li>
               <RouterLink to="/">首页</RouterLink>
            </li>
            <li v-for="(cate) in categoryList" :key="cate.id" @mouseenter="handleEnter(cate.id)" @mouseleave="handleLeave('')">
               <a @click="handleClick('category',cate.id)">{{ cate.name }}</a>
               <div class="layer" :class="{show:categoryId===cate.id}">
                  <ul>
                     <li v-for="(chil) in cate.children" :key="chil.id" @click="handleClick('subcategory',chil.id)">
                        <a>
                           <img v-lazy="chil.picture" :alt="chil.name" :title="chil.name">
                           <p>{{ chil.name }}</p>
                        </a>
                     </li>
                  </ul>
               </div>
            </li>
         </template>
      </el-skeleton>
   </ul>
</template>

<style scoped lang="less">
.navs {
   width: 820px;
   display: flex;
   justify-content: space-around;
   align-items: center;
   padding-left: 40px;
   position: relative;
   z-index: 999;

   .el-skeleton {
      display: flex;

      .el-skeleton__item {
         width: 38px;
         margin-right: 40px;
      }
   }

   > li {
      margin-right: 40px;
      width: 38px;
      text-align: center;

      > a {
         font-size: 16px;
         line-height: 32px;
         height: 32px;
         display: inline-block;
      }

      &:hover {
         > a {
            color: @xtxColor;
            border-bottom: 1px solid @xtxColor;
         }

      }
   }
}

.layer {
   width: 1240px;
   background-color: #fff;
   position: absolute;
   left: -200px;
   top: 56px;
   height: 0;
   overflow: hidden;
   opacity: 0;
   box-shadow: 0 0 5px #ccc;
   transition: all .2s .1s;

   ul {
      display: flex;
      flex-wrap: wrap;
      padding: 0 70px;
      align-items: center;
      height: 132px;

      li {
         width: 110px;
         text-align: center;

         img {
            width: 60px;
            height: 60px;
         }

         p {
            padding-top: 10px;
         }

         &:hover {
            p {
               color: @xtxColor;
            }
         }
      }
   }

   &.show {
      height: 132px;
      opacity: 1;
   }
}
</style>
